<script setup lang="ts">
  import { useSlots, Slots } from 'vue'
  import {
    ElCascader,
    ElInput,
    ElInputNumber,
    ElSegmented,
    ElColorPicker,
    ElFormItem
  } from 'element-plus'
  import { XIconSelector } from '../XIconSelector'
  import { IptPropsType } from './types'
  import { IptTypeConst } from './consts'

  defineOptions({
    name: 'XIpt',
    components: {
      ElCascader,
      ElInput,
      ElInputNumber,
      ElSegmented,
      ElColorPicker,
      XIconSelector
    }
  })

  withDefaults(defineProps<IptPropsType>(), {
    iptType: IptTypeConst.ElInput,
    iptProps: {} as any,
    formItem: true,
    formItemProps: {} as any
  })

  const value = defineModel<any>('value')

  const slots: Slots = useSlots()
</script>

<template>
  <el-form-item v-if="formItem" v-bind="formItemProps">
    <component :is="iptType" v-bind="iptProps" v-model="value" class="x-ipt">
      <template v-for="(_, name) in slots" #[name]>
        <slot :name="name"></slot>
      </template>
    </component>
  </el-form-item>
  <component :is="iptType" v-else v-bind="iptProps" v-model="value" class="x-ipt">
    <template v-for="(_, name) in slots" #[name]>
      <slot :name="name"></slot>
    </template>
  </component>
</template>

<style lang="scss">
  @use './style' as *;
</style>
